<template>
  <div id="app">
    <v-header></v-header>
    <div class="tabs">
      <router-link class="tabs-item" to="/newsong">新歌</router-link>
      <router-link class="tabs-item" to="/about">关于我</router-link>
    </div>
    <router-view/>
    <player></player>
  </div>
</template>

<script>
import header from './components/header/header' 
import player from './components/player/player'
export default {
  name: 'App',
  data(){
    return{
      
    }
  },
  components:{
    'v-header':header,
    player,
  }
}
</script>

<style scoped>
.tabs{
  display: flex;
  text-align: center;
}
.tabs-item{
  flex: 1;
  padding: 7px 0;
  color: #000;
}
.router-link-active{
  color:#00c1da;
  border-bottom: 0.5px solid #00c1da;
}
</style>
